<template>
  <page-lr>
    <el-form size="small" :model="searchForm" label-width="90px" slot="content-right">
      <el-form-item label="创建日期：">
        <el-date-picker v-model="searchForm.creation_date"  type="daterange" value-format="yyyy-MM-dd" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="creationDate" style="width:100%;"></el-date-picker>
      </el-form-item>
      <el-form-item label="应对日期：">
        <el-date-picker v-model="searchForm.episode_date"  type="daterange" value-format="yyyy-MM-dd" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="episodeDate" style="width:100%;"></el-date-picker>
      </el-form-item>
      <el-form-item label="应对指标：">
        <el-select v-model="searchForm.episode_pollutant" placeholder="请选择">
          <el-option :value="''" label="全部指标"></el-option>
          <el-option v-for="(item,index) in initData.pollutants" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="管控等级：">
        <el-select v-model="searchForm.episode_grade" placeholder="请选择">
          <el-option :value="0" label="全部等级"></el-option>
          <el-option v-for="(item,index) in initData.levels" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="应对站点：">
        <el-select v-model="searchForm.episode_stations" placeholder="请选择">
          <!-- <el-option :value="0" label="全部站点"></el-option> -->
          <el-option v-for="(item,index) in initData.stations" :key="index" :label="item.name" :value="item.station_id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item >
        <el-button icon="el-icon-refresh" size="small" @click="resetSearch">重置</el-button>
        <el-button type="primary" icon="el-icon-search" size="small" @click="getList()">查询</el-button>
      </el-form-item>
    </el-form>
    <template slot="content-left" v-loading="table_data.loading">
      <el-table
          v-if="isShow"
          
          ref="multipleTable"
          :data="table_data.list"
          stripe
          border
          :height="tableHeight"
          size="medium"
          style="width: 100%">
          <el-table-column label="序号" type="index" width="55" fixed />
          <el-table-column label="事件名称" prop="episode_name" fixed />
          <el-table-column label="创建日期" prop="creation_date" />
          <el-table-column label="应对日期" prop="episode_date" />
          <el-table-column label="应对指标" prop="episode_pollutant">
            <template slot-scope="scope">
              {{$util.setName(scope.row.episode_pollutant, initData.pollutants, {id: 'value', name: 'label'})}}
            </template>
          </el-table-column>
          <el-table-column label="管控等级" prop="episode_grade">
            <template slot-scope="scope">
              {{$util.setName(scope.row.episode_grade, initData.levels, {id: 'value', name: 'label'})}}
            </template>
          </el-table-column>
          <el-table-column label="应对站点" prop="episode_stations">
            <template slot-scope="scope">
              {{$util.setName(scope.row.episode_stations, initData.stations, {id: 'station_id', name: 'name'})}}
            </template>
          </el-table-column>
          <el-table-column label="应对评估效果" fixed="right">
            <template slot-scope="scope">
              <el-link :underline="false" type="primary" icon="el-icon-view" @click="$refs.showEffect.init(scope.row)">查看</el-link>
            </template>
          </el-table-column>          
          <el-table-column label="操作" fixed="right" width="210px">
            <template slot-scope="scope">
              <el-link :underline="false" type="primary" class="m-r-10" icon="el-icon-edit" @click="toCompanyList(scope.row)">编辑</el-link>
              <template v-if="!userInfo.is_region_user">
              <el-link :underline="false" type="primary" class="m-r-10" icon="el-icon-document" @click="$refs.changeName.init(scope.row)">重命名</el-link>
              <el-link :underline="false" type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-link>
              </template>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="page.current"
          :page-size="page.size"
          :page-sizes="page_sizes"
          :total="page.total"
          background
          style="padding-top: 30px; text-align: center;"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="getList"
          @size-change="pageSizeChange"
        />
    </template>
    <change-name ref="changeName" @confirm="getList(page.current)" />
    <show-effect ref="showEffect" />
  </page-lr>
</template>
<script>
import changeName from './changeName';
import showEffect from './showEffect';
export default {
  components:{
    changeName,
    showEffect
  },
  data() {
    return{
      isShow: true,
      searchForm:{
        creation_date:[],
        episode_date: [],
        episode_pollutant: '',
        episode_grade: 0,
        episode_stations: 0
      },
      creationDate:{
        disabledDate: null
      },
      episodeDate: {
        disabledDate: null
      },
      defaultSearchForm:{},
      table_data:{
        loading: true,
        list: [],
      },
      page:{
        current: 1,
        size: 10,
        total: 0,
      },
      page_sizes:[10,20,30,60,100],
      domHeight: null,
      tableHeight: null,
      initData:{
        pollutants: [
          { label: 'O₃', value: 'o3', alias: 'O3' },
          { label: 'NOx', value: 'nox', alias: 'NOx' },
          { label: 'PM', value: 'pm', alias: 'PM' }
        ],
        levels: [
          { label: 'Ⅱ级', value: 2 },
          { label: 'Ⅲ级', value: 3 },
        ],
        stations: [],
      },
      userInfo:{},
    }
  },
  async created(){
    this.table_data.loading = false;
    this.isRegionUser();
    await this.getInitData();
    this.getList();
  },
  watch:{
    $route(to,from){
      this.$refs.multipleTable.doLayout();
    }
  },
  methods:{
    init(){
      this.isShow = false;
      setTimeout(() => {
        this.isShow = true;
      },10);
    },
    isRegionUser(){
      this.userInfo = this.$store.getters.currentUserInfo;
    },
    async getInitData(){
      this.domHeight = document.body.clientHeight - 64 - 40 - 48*2 - 10;
      this.tableHeight = this.domHeight -60;
      this.creationDate.disabledDate = (time) => {
        const current = new Date().getTime();
        const start = new Date('2023-01-01').getTime();
        return time.getTime() > current || time.getTime() < start;
      }
      this.episodeDate.disabledDate = (time) => {
        const current = new Date(this.$moment().add(7, 'd')).getTime();
        const start = new Date('2023-01-01').getTime();
        return time.getTime() > current || time.getTime() < start;
      }
      this.initData.stations = await this.$request('get', '/air/stations', {});
      let id = String(this.initData.stations[0].station_id).substring(0,5);
      this.initData.stations.unshift({station_id: Number(id), name: '全市站点'});
      this.searchForm.episode_stations = Number(id);
      this.defaultSearchForm = JSON.parse(JSON.stringify(this.searchForm));
    },
    getList(page,size){
      let params = {
        page_num : page || 1,
        page_count : size || this.page.size,
      };
      params.page_num -= 1;
      this.table_data.loading = true; 
      this.$request('post', '/stations/pollute_incidence_sel'+this.$util.serialize(params), this.$util.filterParams(this.searchForm), (data,msg) => {
        this.table_data.loading = false;
        this.table_data.list = data.datas;
        this.page.total = data.total;
      },msg => {
        this.table_data.loading = false;
      })
    },
    pageSizeChange(val){
      this.page.size=val;
      this.getList(1, val);
    },	
    resetSearch(){
      this.$util.resetForm(this.searchForm, this.defaultSearchForm);
      this.getList();
    },
    toCompanyList(row){
      this.$emit('change',row, 'companyList');
    },
    handleDelete(row){
      this.$confirm('确定要删除【'+row.episode_name+'】这个污染事件?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$request('get', '/stations/pollute_incidence_del',{id: row.id}, (data,msg) => {
            this.$message.success(msg);
            this.getList(this.page.current);
          })
        }).catch(() => {
                   
        });
    }
  }

}
</script>